import "./style.scss";
import { Button, Card, Col, Divider, Row } from "antd";
import { useTranslation } from "react-i18next";

const FourthHomePage = () => {
  const { t } = useTranslation();

  return (
    <div className="fourth-home-page">
      <Row className="row-one">
        <Col xs={24} sm={24} md={24} lg={12} xl={12} className={"left"}>
          <Row>
            <Col span={24} className={"title"}>
              <span>TURINGBOT-</span>
              <span>{t("AdvantagesOfIntelligentTitle")}</span>
            </Col>
            <Col span={24} className="subtitle">
              {t("MorePreciseInTracking")}
            </Col>
            <Col span={24} className="fourth-home-btn">
              <Button type="primary">{t("startUsing")}</Button>
            </Col>
          </Row>
        </Col>
        <Col xs={24} sm={24} md={24} lg={12} xl={12} className="right" style={{ display: "flex" }}>
          <div className="background" />
          <Row justify="center" align="center">
            <Col xs={12} sm={12} md={12} lg={12} xl={12}>
              <div className="card-container">
                <Card>
                  <span className="number">20K+</span>
                  <span className="title">{t("ActiveUsers")}</span>
                </Card>
              </div>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12} xl={12}>
              <div className="card-container">
                <Card>
                  <span className="number">5M+</span>
                  <span className="title">{t("Transfer")}</span>
                </Card>
              </div>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12} xl={12}>
              <div className="card-container">
                <Card>
                  <span className="number">50K+</span>
                  <span className="title">{t("Server")}</span>
                </Card>
              </div>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12} xl={12}>
              <div className="card-container">
                <Card>
                  <span className="number">10M</span>
                  <span className="title">{t("Transfer")}</span>
                </Card>
              </div>
            </Col>
          </Row>
        </Col>

      </Row>

    </div>
  );
};

export default FourthHomePage;
